<template>
  <!-- 选择医疗机构弹窗 -->
  <Modal
    v-model="visible"
    title="药师选择弹窗"
    width="1100px"
    class="drugmanagement-departmentdrug-add-choose"
  >
    <div class="Institutionalregistration">
      <div class="container">
        <header class='wone'>
          <div class="search">
            <span class='wtwo' >药师姓名：</span>
            <Input v-model.trim="modalFilterObj.name_LIKE" clearable class='wthree' />
            <Button style="width:75px;height:35px;"
              type="primary"
              @click="modalSearch()"
              class='wfour'
            >查询</Button>
            <Button style="width:75px;height:35px;" @click="modalReset" class='wfour'>重置</Button>
          </div>
        </header>
        <div class="list">
          <Table
            border
            :columns="modalColumn"
            :data="modalData"
            stripe
            :loading="modalTableLoading"
            @on-row-click="onRowClick"
            no-filtered-data-text="未查询到符合条件的记录"
          ></Table>
        </div>
        <div class="paging">
          <div>
            显示第{{modalFilterObj.pageSize * (modalFilterObj.pageNo - 1) + 1}}到第{{modalFilterObj.pageSize * modalFilterObj.pageNo}}条记录，总共{{modalCount}}条记录 每页显示
            <Select v-model="modalFilterObj.pageSize" class='wsix' placement="top">
              <Option
                v-for="item in modalPageList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>条记录
          </div>
          <Page
            :total="modalCount"
            @on-change="modalPageChange"
            :page-size="modalFilterObj.pageSize"
            :current="modalFilterObj.pageNo"
          ></Page>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <Button
        class="save"
        type="primary"
        :disabled="currentChoose.id !== 0 && !currentChoose.id"
        @click="handleModalSave"
      >确认选择</Button>
    </div>
  </Modal>
</template>

<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
const modalFilterObj = {
  pageNo: 1,
  pageSize: 10,
  name_LIKE: null
};
export default {
  components: {
    newfourLevelLinkage
  },
  model: {
    prop: "visible",
    event: "change"
  },
  props: {
    visible: Boolean,
    onCancel: () => {},
    onOk: () => {}
  },
  created() {
  },
  data() {
    return {
      modalFilterObj: this.deepClone(modalFilterObj),
      modalTableLoading: false,
      currentChoose: {},
      modalColumn: [
        { title: "姓名", key: "name", align: "center" },
        { title: "性别", key: "gender", align: "center", render(h, params) {
          return ['', '男', '女'][params.row.gender];
        } },
        { title: "手机号", key: "phone", align: "center" },
        {
          title: "选择",
          key: "id",
          width: 70,
          align: "center",
          render: (h, params) => {
            let flag = false;
            if (this.currentChoose.id === params.row.id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag
                },
                on: {
                  "on-change": () => {
                    self.currentChoose = params.row;
                  }
                }
              })
            ]);
          }
        }
      ],
      modalPageList: [
        {
          value: 10,
          label: 10
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 50,
          label: 50
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    onRowClick(n, o) {
      this.currentChoose = n;
    },
    handleChange() {
      this.$emit("change", [this.fromTime, this.endTime]);
    },
    modalSearch() {
      this.modalFilterObj.pageNo = 1;
      this.storeManagementUserAvailableDoctors();
    },
    modalReset() {
      this.modalFilterObj = this.deepClone(modalFilterObj);
      this.storeManagementUserAvailableDoctors();
    },
    handleModalSave() {
      this.onOk && this.onOk(this.currentChoose);
    },
    modalPageChange(index) {
      this.modalFilterObj.pageNo = index;
      this.storeManagementUserAvailableDoctors();
    },
    storeManagementUserAvailableDoctors() {
      this.modalTableLoading = true;
      let body={
        pageNo:this.modalFilterObj.pageNo,
        pageSize:this.modalFilterObj.pageSize,
        searchKey:this.modalFilterObj.name_LIKE,
      }
      this.$axios
        .post(api.storeManagementUserAvailableDoctors, body)
        .then(res => {
          this.modalTableLoading = false;
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.modalData = ret.records;
            this.modalCount = ret.total;
          }
        });
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  },
  watch: {
    visible(n) {
      this.$emit("change", n);
      this.currentChoose = {};
      if (n) {
        this.modalFilterObj.pageNo = 1;
        this.storeManagementUserAvailableDoctors();
      }
    },
    "modalFilterObj.pageSize"() {
      this.storeManagementUserAvailableDoctors();
    }
  }
};
</script>

<style scoped lang="less">
.wone{padding-bottom: 20px;}
.wtwo{margin-left:30px;}
.wthree{width: 260px;}
.wfour{margin-left:30px;width:92px;height:32px;}
.wsix{width:60px}
.drugmanagement-departmentdrug-add-choose {
  /deep/ .ivu-modal-wrap {
    .ivu-modal-footer {
      display: none;
    }
    // .ivu-modal{
    //     float:right !important;
    //     margin:50px 30px 0;
    // }
    // .ivu-modal-content{
    //     box-shadow: 8px -5px 3px #7581e7; 
    //     border:1px solid  #7581e7;
    // }
    .btn-group {
      text-align: center;
      .save {
        width: 100px;
        margin-right: 20px;
      }
      .close {
        margin-left: 20px;
        width: 100px;
      }
    }
    .ivu-table .demo-table-info-row td {
      background-color: #02A198;
      color: #fff;
    }
  }
  .paging {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
  }
}
</style>